<template>
	<view class="commodity_list_main">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav_item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
	<view class="shopping_cart">
		<view class="shopping_cart_commodity_info">
			<view class="commodity_image">
				<image src="../../../static/image/banner.png" mode=""></image>
			</view>
			<view class="commodity_synopsis">
				<view class="commodity_title">
					户外必备玉石神器户外必备玉石神器户外必备玉石神器户外必备玉石神器
				</view>
				<view class="shopping_cart_timer_money">
					<view class="shopping_cart_timer">
					</view>
					<view class="shopping_cart_money">
						¥1589.00
					</view>
				</view>
			</view>
		</view>
		<view class="shopping_cart_btn">
			<slot name="footer"></slot>
			<view class="shopping_cart_checked_btn" v-show="cartCheaked">
				<image src="../../../static/image/shoppingUnselected.png" mode=""></image>
			</view>
			<view class="shopping_cart_order_btn">
				<text class="shopping_cart_order_cancel">
					取消订单
				</text>
				<text class="shopping_cart_order_payment">
					立即付款
				</text>
			</view>
		</view>
	</view>
		<view class="putaway_commodity" v-show="dialogShow">
			<view class="putaway_commodity_main">
				<view class="putaway_commodity_explain">
					上架商品需支付<text>100元</text>手续费
				</view>
				<view class="putaway_commodity_btns">
					<text @click="handlePutawayCommodity">取消支付</text>
					<text>立即支付</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCurrentIndex: 0, // 切换索引
				cartCheaked: 0, // 是否显示复选框
				dialogShow: false, // 是否展示弹出框
				navList: [{
					state: 1,
					text: '可出售',
					commodityList: []
				}, {
					state: 2,
					text: '待上架',
					commodityList: []
				}, {
					state: 3,
					text: '上架中',
					commodityList: []
				}, {
					state: 4,
					text: '待确认',
					commodityList: []
				}, {
					state: 5,
					text: '已完成',
					commodityList: []
				}],
				/** 商品列表数据 */
				goodsList: [],
			}
		},
		onLoad() {
			// 页面显示是默认选中第一个
			this.tabCurrentIndex = 0;
			// this.getGoodsList(1);
		},
		methods: {
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.getGoodsList(index + 1);
			},
			// 展示上架商品弹框
			handlePutawayCommodity() {
				this.dialogShow = !this.dialogShow;
			},
			/** 获取商品列表数据 */
			getGoodsList(status) {
				let parameter = {
					page: 1,  // 页数
					status: status, // 状态
				};
				this.$post(this.api.getGoodsList, parameter, 'post', { token: uni.getStorageSync('token') }).then((res) => {
					console.log(res)
					this.addressList = res.data;
				}).catch((err) => {
					console.log(err)
				})
			}
		},
	} 
</script>

<style lang="less" scoped>
	page, .commodity_list_main {
		background-color: #F7F7F7;
		height: 100hv;
	}
	.navbar {
		display: flex;
		height: 80rpx;
		border-bottom: 1px solid #E5E5E5;
		position: relative;
		z-index: 10;
		.nav_item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30rpx;
			color: #000;
			position: relative;
			&.current {
				color: #D1A764;
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #C5A36C;
				}
			}
		}
	}
	.commodity_product_info {
		padding: 0 20rpx;
	}
	.putaway_commodity {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 999;
		background: rgba(0, 0, 0, 0.5);
		.putaway_commodity_main {
			width: 632rpx;
			height: 290rpx;
			margin: 336rpx auto 0;
			text-align: center;
			border-radius: 5rpx;
			background-color: #fff;
			.putaway_commodity_explain {
				color: #000;
				font-size: 36rpx;
				padding: 73rpx 0 74rpx 0;
				text {
					color: #E84E4E;
				}
			}
			.putaway_commodity_btns {
				font-size: 30rpx;
				display: flex;
				justify-content: space-between;
				padding: 0 93rpx;
				text {
					border-radius: 5rpx;
					display: inline-block;
				}
				text:first-child {
					border: 2rpx solid #E5E5E5;
					width: 173rpx;
					height: 58rpx;
					line-height: 58rpx;
					color: #999;
				}
				text:last-child {
					width: 175rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #fff;
					background: linear-gradient(90deg, #CFA461 0%, #DCBB7E 100%);
				}
			}
		}
	}
	.shopping_cart {
		margin-top: 22rpx;
		border-radius: 10px;
		padding: 18rpx 18rpx 0rpx 18rpx;
		box-shadow: 0px 0px 20px #E8E8E8;
		.shopping_cart_commodity_info {
			display: flex;
			justify-content: space-between;
			padding-bottom: 22rpx;
			border-bottom: 1rpx solid #E5E5E5;
		}
		.commodity_image {
			margin-right: 20rpx;
			width: 240rpx;
			height: 170rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.commodity_synopsis {
			width: 100%;
			.commodity_title {
				min-height: 65rpx;
				padding-top: 8rpx;
				line-height: 36rpx;
				color: #2D2D2D;
				padding: 9rpx 23rpx 0 0;
				font-size: 30rpx;
				overflow: hidden;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}
		.shopping_cart_timer_money {
			padding-top: 39rpx;
			display: flex;
			justify-content: space-between;
			.shopping_cart_money {
				font-size: 30rpx;
				padding-top: 8rpx;
			}
		}
		.shopping_cart_btn {
			padding-top: 30rpx;
			height: 104rpx;
			box-sizing: border-box;
	        .shopping_cart_checked_btn {
				display: inline-block;
				image {
					width: 35rpx;
					height: 35rpx;
					vertical-align: middle;
				}
			}
			.shopping_cart_order_btn {
				float: right;
				text {
					font-size: 24rpx;
					text-align: center;
					border-radius: 5rpx;
					display: inline-block;
				}
				text:first-child {
					height: 46rpx;
					width: 136rpx;
					line-height: 46rpx;
					color: #999999;
					border: 1rpx solid #E5E5E5;
					margin-right: 20rpx;
				}
				text:last-child {
					color: #F4F5FA;
					height: 48rpx;
					width: 138rpx;
					line-height: 48rpx;
					background: linear-gradient(90deg, #CFA461 0%, #DCBB7E 100%);
				}
			}
		}
	}
</style>
